<div id="scale-popover" class="popover fade right in" ng-controller="ScaleCtrl">
  <div class="arrow"></div>

  <h3 class="popover-title">Edit Scale <a class="close" ng-click="editBinding($event, 'scale')">×</a></h3>

  <div class="inner">
    <vde-property label="Name" type="text" item="activeScale" property="name"
                  ng-model="activeScale.displayName" nodrop="1" style="full"></vde-property>

    <h4>Type</h4>

    <vde-property label="Type" type="select" options="types" item="activeScale"
                  property="type" ng-model="activeScale.properties.type"
                  nodrop="1" style="full"></vde-property>

    <br clear="all" />

    <div ng-show="activeScale.properties.type == 'ordinal'">
      <vde-property label="Uniform" type="checkbox" item="activeScale"
                    property="points" style="full"
                    ng-model="activeScale.properties.points"></vde-property>

      <vde-property label="Padding" type="range" min="0" max="1" step="0.05"
                    item="activeScale" property="padding" style="full"
                    ng-model="activeScale.properties.padding"></vde-property>
    </div>

    <div ng-show="activeScale.properties.type == 'time'">
      <vde-property label="Clamp" type="checkbox" item="activeScale" style="full"
                    property="clamp" ng-model="activeScale.properties.clamp"></vde-property>

      <vde-property label="Nice" type="select" options="nice" item="activeScale"
                    property="nice" ng-model="activeScale.properties.nice"
                    style="full"></vde-property>
    </div>

    <div ng-show="['ordinal', 'time', 'utc', 'ref'].indexOf(activeScale.properties.type) == -1">
      <div ng-show="activeScale.properties.type == 'pow'">
        <vde-property label="Exponent" type="number" item="activeScale"
                      property="exponent" style="full"
                      ng-model="activeScale.properties.exponent"></vde-property>
      </div>

      <div ng-hide="activeScale.properties.type == 'quantize'">
        <vde-property type="checkbox" label="Clamp" item="activeScale" property="clamp"
                      ng-model="activeScale.properties.clamp" style="third"></vde-property>

        <vde-property type="checkbox" label="Nice" item="activeScale" property="nice"
                      ng-model="activeScale.properties.nice" style="third"></vde-property>

        <vde-property type="checkbox" label="Zero" item="activeScale" property="clamp"
                      ng-model="activeScale.properties.zero" style="third"></vde-property>
      </div>
    </div>

    <br clear="all" />

    <h4>Domain</h4>

    <vde-property label="From" type="radio" item="activeScale" options="fromTypes"
                  property="domainTypes.from" style="full"
                  ng-model="activeScale.domainTypes.from" nodrop="1"></vde-property>

    <br clear="all" />

    <div ng-show="activeScale.domainTypes.from == 'field'">
      <vde-property label="Field" type="field" item="activeScale" property="domainField"
                    field="activeScale.domainField" can-drop-style="left" style="full"></vde-property>
    </div>

    <div ng-show="activeScale.domainTypes.from == 'values'">
      <vde-property label="Values" transclude="1" style="full">
        <vde-scale-values type="text" scale="activeScale" property="domainValues" ng-model="activeScale.domainValues"></vde-scale-values>
      </vde-property>
    </div>

    <div ng-show="activeScale.pipeline().forkName">
      <vde-property label="Groups" type="checkbox" item="activeScale" property="inheritFromGroup"
                    ng-model="activeScale.inheritFromGroup" nodrop="1" style="full"
                    hint="Recalculate for each group"></vde-property>
    </div>

    <h4>Range</h4>

    <vde-property label="Type" type="select" options="rangeTypes" item="activeScale" property="rangeTypes.type" ng-model="activeScale.rangeTypes.type" nodrop="1" transclude="1" style="full"></vde-property>
    <p ng-show="activeScale.rangeTypes.type == 'spatial'">
      <vde-property label="" type="radio" options="axisTypes" item="activeScale" property="axisType" ng-model="activeScale.axisType" nodrop="1" style="full"></vde-property>
    </p>

    <br clear="all" />

    <vde-property label="From" type="radio" options="rangeFromTypes" item="activeScale" property="rangeTypes.from" ng-model="activeScale.rangeTypes.from" nodrop="1" style="full"></vde-property>

    <br clear="all" />

    <div ng-show="activeScale.rangeTypes.from == 'preset'">
      <vde-property label="Preset" type="field" item="activeScale" property="rangeField" field="activeScale.rangeField" style="full" can-drop-style="left"></vde-property>

      <br clear="all" />

      <div class="hint" ng-show="['sizes', 'other'].indexOf(activeScale.rangeTypes.type) == -1">
        <p>These preset ranges are available; to use one, drag it to <code>field</code> above.</p>

        <div ng-show="activeScale.rangeTypes.type == 'spatial' && activeScale.axisType == 'x'"><vde-binding field="'width'" draggable="1"></vde-binding></div>
        <div ng-show="activeScale.rangeTypes.type == 'spatial' && activeScale.axisType == 'y'"><vde-binding field="'height'" draggable="1"></vde-binding></div>
        <div ng-show="activeScale.rangeTypes.type == 'shapes'"><vde-binding field="'shapes'" draggable="1"></vde-binding></div>
        <div ng-show="activeScale.rangeTypes.type == 'colors'"><vde-binding field="'category10'" draggable="1"></vde-binding></div>
        <div ng-show="activeScale.rangeTypes.type == 'colors'"><vde-binding field="'category20'" draggable="1"></vde-binding></div>

        <br clear="all" />
      </div>
    </div>

    <div ng-show="activeScale.rangeTypes.from == 'values'" ng-switch on="activeScale.rangeTypes.type">
      <div ng-switch-when="colors">
        <vde-property label="Values" transclude="1" style="full">
          <vde-scale-values type="color" scale="activeScale" property="rangeValues" ng-model="activeScale.rangeValues"></vde-scale-values>
        </vde-property>
      </div>

      <div ng-switch-when="shapes">
        <vde-property label="Values" transclude="1" style="full">
          <vde-scale-values type="select" options="shapes" scale="activeScale" property="rangeValues" ng-model="activeScale.rangeValues"></vde-scale-values>
        </vde-property>
      </div>

      <div ng-switch-when="other">
        <vde-property label="Values" transclude="1" style="full">
          <vde-scale-values type="text" scale="activeScale" property="rangeValues" ng-model="activeScale.rangeValues"></vde-scale-values>
        </vde-property>
      </div>

      <div ng-switch-default>
        <vde-property label="Values" transclude="1" style="full">
          <vde-scale-values type="number" scale="activeScale" property="rangeValues" ng-model="activeScale.rangeValues"></vde-scale-values>
        </vde-property>
      </div>
    </div>

    <vde-property label="Reverse" type="checkbox" item="activeScale" property="reverse" ng-model="activeScale.properties.reverse" style="full"></vde-property>

    <br clear="all" />
    <h4>Delete Scale</h4>
    <p><a class="btn-danger btn btn-mini" ng-class="{disabled: activeScale.used}" ng-click="deleteScale()">Delete Scale</a></p>
    <p ng-if="activeScale.used">This scale cannot be deleted as it is currently bound to a visual property</span></p>
  </div>

</div>
